<template>
  <view class="contanier">
    <view class="title">全部评论</view>
    <view class="wrap">
      <view class="comment-list" v-for="item in list" :key="item.id">
        <!-- 用户信息 -->
        <image class="avatar" :src="item.avatar"></image>
        <view class="right">
          <view class="username flex m-bottom-40">
            <view class="flex-1">{{ item.username }}</view>
            <view v-if="!!item?.is_can_del" class="m-left-8 del-btn" @click="() => handleDel(item.id)">删除</view>
          </view>
          <view class="content-wrapper m-bottom-30">
            <view class="content">{{ item.content }}</view>
            <view class="report-btn" @click.stop="() => handleReport(item)">
              <image class="report-icon" src="@/static/images/point/report.png" mode="aspectFit" />
            </view>
          </view>
          <view class="replay" :style="{ 'color': color }" @click="() => handleReply(item)">回复</view>
          <view class="comment-wrap m-top-30" v-if="item.reply.length > 0">
            <view class="comment" v-for="(sub, i) in item.reply" :key="i">
              <view class="flex-l flex-1">
                <image class="avatar" :src="sub.avatar"></image>
                <view class="content flex-1">{{ `${sub.username}：${sub.content}` }}</view>
              </view>
              <view v-if="!!sub?.is_can_del" class="del-btn" @click="() => handleDel(sub.id)">删除</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  color: {
    type: String,
    default: '#1ca4c0'
  }
});

const emit = defineEmits(['reply', 'del']);
// 回复评论
const handleReply = (item: any) => {
  emit('reply', item);
};

// 删除评论
const handleDel = (id: number) => {
  emit('del', id);
};

// 举报处理
const handleReport = (item: any) => {
  uni.navigateTo({
    url: `/pages/report/bad-words?type=bad_words&source_id=${item.id}`,
  });
};
</script>

<style lang="scss" scoped>
.contanier {
  width: 100%;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #e6e6e6;
    box-sizing: border-box;
  }
  .wrap {
    padding-top: 30rpx;
    box-sizing: border-box;
    .comment-list {
      display: flex;
      .avatar {
        width: 60rpx;
        height: 60rpx;
        background: #1ca4c0;
        border-radius: 50%;
      }
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 14rpx;
        font-size: 28rpx;
        font-weight: 500;
        padding-bottom: 30rpx;
        padding-top: 14rpx;
        border-bottom: 1rpx solid #e6e6e6;
        margin-bottom: 30rpx;
        .del-btn {
          color: $sub;
          margin-left: 6rpx;
          width: 60rpx;
          align-self: flex-start;
        }
        .content-wrapper {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 20rpx;
          .content {
            flex: 1;
          }
          .report-btn {
            flex-shrink: 0;
            width: 40rpx;
            height: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            .report-icon {
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
        .comment-wrap {
          padding: 17rpx;
          background: #f7f7f7;
          border-radius: 10rpx;
          box-sizing: border-box;
          .del-btn {
            color: $sub;
            margin-left: 6rpx;
            width: 60rpx;
            align-self: flex-start;
          }
          .comment {
            flex: 1;
            &:not(:last-of-type) {
              margin-bottom: 24rpx;
            }
            display: flex;
            align-items: center;
            .avatar {
              width: 34rpx;
              height: 34rpx;
              background: #1ca4c0;
              border-radius: 50%;
              align-self: flex-start;
            }
            .content {
              font-size: 28rpx;
              margin-left: 13rpx;
            }
          }
        }
      }
    }
  }
}
</style>
